<template>
  <!-- 方案审核师管理 -->
  <base-breadcrumb>
    <searchData
      :searchData="searchArr"
      @search="search"
    ></searchData>
    <a-row
      :gutter="10"
      class="page-height"
    >
      <!-- 树搜索 -->
      <a-col :span="6">
        <a-card
          :bordered="false"
          class="page-height-tree"
        >
          <!-- <title-name title="所属组织结构"></title-name> -->
          <!-- 公司组织树搜索 -->
          <tree-list
            @loader="search"
            :selectedKeys.sync="selectedKeys"
          ></tree-list>
          <!-- <tree-organization
                          ref="treeOrganization"
                          @loader="search"
                          :autoSelect="false"
                          :org-query="orgQuery"
                          :selectedKeys.sync="selectedKeys"
                          :selectOptions.sync="selectOptions"
                      ></tree-organization> -->
        </a-card>
      </a-col>
      <a-col
        :span="18"
        class="page-height-list-wrapper"
      >
        <!-- 表格 -->
        <a-card
          :bordered="false"
          class="nomargin page-height-list"
        >
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :start-index="0"
            @select-click="(e) => (selectedRowKeys = e.keys)"
            :request="loadData"
          >
            <a-button
              slot="prefix"
              v-btnPermission="'tm_030_add_01'"
              :loading="addLoading"
              class="btn_right"
              type="primary"
              @click="handleManage(null, 'add')"
            >新增</a-button>
            <span
              slot="hireStatus"
              slot-scope="text, record"
            >
              {{ record.hireStatus ? '聘用' : '非聘用' }}
            </span>
            <!-- 表格行操作栏 -->
            <span
              slot="action"
              slot-scope="text, record"
            >
              <MoreButton>
                <a
                  v-btnPermission="'tm_030_loo_04'"
                  @click="handleManage(record, 'look')"
                >查看</a>
                <a-divider
                  v-btnPermission="'tm_030_edi_02'"
                  type="vertical"
                />
                <a
                  v-btnPermission="'tm_030_edi_02'"
                  @click="handleManage(record, 'edit')"
                >编辑</a>
                <template v-if="!record.hireStatus">
                  <a-divider
                    v-btnPermission="'tm_030_del_03'"
                    type="vertical"
                  />
                  <a
                    v-btnPermission="'tm_030_del_03'"
                    @click="del(record.id)"
                  >删除</a>
                </template>
                <template>
                  <a-divider
                    v-btnPermission="'tm_030_sfp_05'"
                    type="vertical"
                  />
                  <a
                    v-btnPermission="'tm_030_sfp_05'"
                    @click="edit(record, 'edit')"
                  >{{record.hireStatus ? '解除聘用' : '聘用'}}</a>
                </template>
              </MoreButton>
            </span>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
  </base-breadcrumb>
</template>

<script>
import { getReviewerList, delReviewer, updateReviewer } from '@/api/technical/review'
import { getOrgsTree, getStaff } from '@/api/subassembly/TreeSelectOrganization' // api
// import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import TreeList from '../components/orglist.vue' // 树
import Result from '@/components/Dialog/Result' // 提示
const searchArr = [
  // 搜索框
  {
    name: '姓名',
    value: 'name',
    type: 'input'
  },
  {
    name: '电话号码',
    value: 'phone',
    type: 'input'
  },
  {
    name: '技术职称',
    value: 'title',
    type: 'input'
  },
  {
    name: '聘用状态',
    value: 'hireStatus',
    type: 'select',
    data: [
      {
        value: '1',
        label: '聘用'
      },
      {
        value: '0',
        label: '非聘用'
      }
    ]
  }
]
const columns = [
  {
    title: '姓名',
    ellipsis: true,
    width: '120px',
    dataIndex: 'employeeName'
  },
  {
    title: '员工编号',
    ellipsis: true,
    width: '120px',
    dataIndex: 'num'
  },
  {
    title: '电话号码',
    ellipsis: true,
    dataIndex: 'phone',
    width: '120px'
  },
  {
    title: '技术职称',
    ellipsis: true,
    width: '150px',
    dataIndex: 'jobTitle'
  },
  {
    title: '聘用状态',
    width: '100px',
    dataIndex: 'hireStatus',
    scopedSlots: { customRender: 'hireStatus' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '230px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    // TreeOrganization,
    TreeList
  },
  computed: {
    orgQuery() {
      // return { resultWithCODept: true, resultWithBCDept: true, resultWithPDDept: true, containTags: ['CO', 'EXTEND'] }
      return { containTags: ['CO', 'BC'], containVirtual: 1 }
    },
    // 树节点api
    api() {
      return { getOrgsTree }
    },
    // 非安全人员api
    apiEdit() {
      return { getEmployeeList }
    }
    // 表格列表请求参数
    // args() {
    //   let args = this.queryParam
    //   // 添加树节点id
    //   if (this.selectedKeys[0]) {
    //     args.orgId = this.selectedKeys[0]
    //   }
    //   return args
    // }
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      loading: false,
      addLoading: false,
      selectedRowKeys: [], // 表格选项
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      // 弹窗参数
      // 查询参数
      queryParam: {},
      first: true,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (this.first && this.selectedKeys.length === 0) return
        this.first = false
        const requestParameters = Object.assign({}, parameter, { orgId: this.selectedKeys[0] },this.queryParam)
        return getReviewerList(requestParameters).then((res) => {
          // if (that.selectedRowKeys.length > 0) {
          //     that.$refs.table.clearSelected()
          // }
          return res
        })
      }
    }
  },
  mounted() {
    // 获取分项工程
    // this.$refs.treeOrganization.getList()
  },
  methods: {
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
        if (value.hireStatus !== undefined) {
          this.queryParam.hireStatus = value.hireStatus == '1' ? true : false
        }
      }
      this.$refs.table.refresh(true)
    },
    del(id) {
      let that = this
      that.$confirm({
        title: '提示',
        content: '确定是否删除？',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          return delReviewer(id).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('删除成功！')
              that.$refs.table.refresh(true)
            }
          })
        }
      })
    },
    // 查看|编辑|新增
    handleManage(b, type) {
      const query = { type }
      if (type !== 'add') {
        query.id = b.id
      }
      this.$router.push({
        path: '/science/expert/auditor/edit',
        query: query
      })
    },
    edit(rows) {
      const param = { ...rows }
      const that = this
      const msg = param.hireStatus ? '解除聘用' : '聘用'
      param.hireStatus = !param.hireStatus
      this.$confirm({
        title: '提示',
        content: `确定${msg}吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk() {
          return updateReviewer(param).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success(`${msg}成功！`)
              that.$refs.table.refresh(true)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less">
.nomargin .pub-table-action-btn {
  margin: 0;
}
</style>

